<!-- Header
================================================== -->
<header id="nav-bar" class="container">
   <div class="row">
      <div class="span12">
         <div id="header-container">
            <a id="backbutton" class="win-backbutton" href="./hub.html"></a>
            <h5>{{appname}}</h5>
            <div class="dropdown">
               <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#" >
                  {{_i}}Metro Layouts{{/i}}
                  <b class="caret"></b>
               </a>
               {{>headermenu}}
            </div>
         </div>
         {{>loggeduser}}
      </div>
   </div>
</header>

<div class="container">
   <div class="row">
      <div class="metro span12">
         <div class="metro-sections">

            <div class="metro-section" id="section1">

               <a class="tile wide imagetext bg-color-orange" href="./list-detail.html">
                  <div class="image-wrapper">
                     <img src="assets/img/metro-tiles.jpg" />
                  </div>
                  <div class="column-text">
                     <div class="text-header3">Listview with Details</div>
                  </div>
               </a>

               <a class="tile wide imagetext tile-double bg-color-green" href="#">
                  <div class="image-wrapper">
                     <img src="assets/img/metro-tiles-wide.jpg" />
                  </div>
                  <div class="column-text">
                     <div class="text-header3">...more to come...</div>
                  </div>
               </a>

            </div>

         </div>
      </div>
   </div>
</div>